<template>
  <div class="w-full h-screen">
     <div class="flex w-full list-none p-4 bg-orange-100 text-center flex-wrap">
          <i class="mr-5" @click="returnHome"> reuten </i>
          <li class="mr-10" @click="release">即将上映</li>
          <li class="mr-10" @click="onRelease">正在上映</li>
      </div>
      <div v-for="item in resData.movies" class="flex text-sm mb-4 border-solid border-2 border-indigo-100" @click="ondetails(item.id)">
        <img :src="item.poster" class="w-1/4 mr-1" alt="">
        <div class=" border-black">
            <h1>{{item.titel}}</h1>
            <p class="mb-4">上映时间：{{item.pubdate}}</p>
            <p class="mb-4">主演：<span v-for="itemName in item.casts">{{itemName.name}}</span></p>
            <p class="mb-4">时长：{{item.duration}}</p>
        </div>
      </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref,onMounted, onUpdated, reactive} from 'vue'
import API from '../../../utils/axios'
import { useRouter } from 'vue-router'

export default defineComponent({
    name:"list",
    setup(){
        const stata = ref(0);
        const resData:any = ref([])
        let getData:any;
        // 在获取函数判断进入的状态码
        getData = async() =>{
        let res = await API({
            url:'/api/movie/hot',
            method:'get'
        })
            if(stata.value==0){
                resData.value = res.data.data.comming
            }else if(stata.value==1){
                resData.value = res.data.data.playing
            }
            
        }
        function release(){
            stata.value = 0
        }
        function onRelease(){
            stata.value = 1
        }
        // 点击卡片进入详情页
        function ondetails(id:number){
            router.push({
                path:'/viedopage',
                query:{
                    id:id
                }
            })
        }
        const router:any = useRouter()
        let formStata:number = reactive(router.currentRoute.value.query.stata)
        function returnHome(){
             router.push({
                path:'/'
            })
        }
        
        // 在东西挂载上去就去调用函数去拿数据
        onMounted(async ()=>{
            stata.value= formStata
            await getData()
            console.log("接到的参数",formStata);
            
        })
        onUpdated(async ()=>{
            await getData()
            // console.log("拿到数据",resData)
        })
        return{
            resData,
            formStata,
            release,
            onRelease,
            returnHome,
            ondetails
        }
    }
})

</script>

<style>
</style>